<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>报名首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="common.js"></script>
    <link rel="stylesheet" href="common.css">
</head>
<body>
<div class="layui-container-fluid">
    <!--标题-->
    <div class="layui-bg-cyan">
        <h1 id="title-container" class="title">EXCEL填报系统</h1>
    </div>

    <fieldset class="layui-elem-field">
        <legend>请选择填报的项目</legend>
        <div class="layui-form layui-field-box el-items-box" >
            <!--表格容器-->
            <div class="layui-row">
                <div class="layui-col-xs-3">
                    <div id="items-container" >
                        <div class="ex-items">

                        </div>

                    </div>
                </div>

            </div>

        </div>
    </fieldset>
    <div id="el-footer"></div>
</div>


<script>
    //Demo
    layui.use(['layer', 'jquery', 'form'], function () {
        let $ = layui.jquery, layer = layui.layer, form = layui.form;
        let itemsContainer = $('#items-container');
        let init=layer.load();

        //1获取条目
        $.get(api.getItems,function (res) {
            if(res.errno===0){
                let html='';
                res.data.forEach(function (obj,index) {
//                    html+=tpl.itemTpl(index,obj)
                    html+=tpl.itemTplV2(obj)
                });
                itemsContainer.html(html);
                layer.close(init);
            }
            if(res.errno===10000){
                layer.close(init);
                layer.msg(errno.errmsg);
            }
        });

        $(".ex-itemsv2").click(function () {
            console.log($(this));
        });
        $('#el-footer').html(tpl.footer());
    });

</script>
</body>
</html>